<script setup>
import {
  StopOutlined,
  ExclamationCircleFilled,
  CheckCircleOutlined,
  SearchOutlined,
  InteractionOutlined,
  ClockCircleOutlined,
  SnippetsOutlined,
  PhoneOutlined,
  MailOutlined,
  AuditOutlined,
  UsergroupAddOutlined,
  UserOutlined
} from '@ant-design/icons-vue'
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import { h } from 'vue'
import UserDetail from '@/views/user/userManage/userList/userDetail/index.vue'
import {
  queryAllUserService,
  enableUserService,
  disableUserService,
  queryAllBanUserService
} from '@/api/manageUser.js'
const columns = [
  {
    name: '用户昵称',
    dataIndex: 'name',
    key: 'name',
    align: 'center'
  },
  {
    title: '用户账号',
    dataIndex: 'username',
    key: 'username',
    align: 'center'
  },
  {
    title: '所属单位',
    dataIndex: 'organization',
    key: 'organization',
    align: 'center'
  },
  {
    title: '用户邮箱',
    dataIndex: 'email',
    key: 'email',
    align: 'center'
  },
  {
    title: '联系电话',
    dataIndex: 'phone',
    key: 'phone',
    align: 'center'
  },

  {
    title: '标签',
    key: 'tags',
    dataIndex: 'tags',
    align: 'center'
  },
  {
    title: '创建时间',
    key: 'createTime',
    dataIndex: 'createTime',
    align: 'center'
  },
  {
    title: '操作',
    key: 'action',
    align: 'center'
  }
]

const parameterModel = ref({
  pageNo: 1,
  pageSize: 10,
  username: '',
  name: '',
  organization: ''
})
const selectValue = ref('1')
const loading = ref(false)
const formModel = ref([])
const total = ref(0)
const getUserList = async () => {
  loading.value = true
  let res = null
  if (selectValue.value === '1') {
    res = await queryAllUserService(parameterModel.value)
  } else {
    res = await queryAllBanUserService(parameterModel.value)
  }
  console.log(res.data)
  formModel.value = res.data.data.records
  total.value = res.data.data.pages // 更新总记录数
  // 遍历并更新每个对象的 `tags` 属性
  loading.value = false
}
getUserList()
const editRef = ref()
const userInfo = ref()
const onEidt = (info) => {
  editRef.value.showModal()
  userInfo.value = info
}
// 自定义图标为红色
const customIcon = h(ExclamationCircleFilled, { style: { color: 'red' } })

const enableUser = async (id) => {
  const res = await enableUserService(id)
  if (res.data.code === 1) {
    message.success('用户已启用')
    getUserList()
  }
}
const disableUser = async (id) => {
  const res = await disableUserService(id)
  if (res.data.code === 1) {
    message.success('用户已禁用')
    getUserList()
  }
}

const cancelDelete = () => {
  message.info('取消删除操作')
}

const onSearch = () => {
  getUserList()
}
const handleChange = () => {
  getUserList()
}
const handlePageChange = (page) => {
  parameterModel.value.pageNo = page
  getUserList()
}
</script>
<template>
  <a-select ref="select" v-model:value="selectValue" style="width: 130px; margin-right: 18px" @change="handleChange">
    <a-select-option value="1">启用用户列表</a-select-option>
    <a-select-option value="0">禁用用户列表</a-select-option>
  </a-select>
  <a-input-search v-model:value="parameterModel.name" placeholder="请输入用户名称" style="width: 250px; margin-right: 18px"
    enter-button @search="onSearch" />
  <a-input-search v-model:value="parameterModel.username" placeholder="请输入用户账号" style="width: 250px; margin-right: 18px"
    enter-button @search="onSearch" />
  <a-input-search v-model:value="parameterModel.organization" placeholder="请输入所属单位" style="width: 250px" enter-button
    @search="onSearch" />
  <br />
  <br />
  <a-table :columns="columns" :data-source="formModel" :loading="loading" :pagination="false">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <UserOutlined />
        <span> 用户名称 </span>
      </template>
      <template v-if="column.key === 'username'">
        <UsergroupAddOutlined />
        <span> 用户账号 </span>
      </template>
      <template v-if="column.key === 'organization'">
        <AuditOutlined />
        <span> 所属单位 </span>
      </template>
      <template v-if="column.key === 'email'">
        <MailOutlined />
        <span>用户邮箱</span>
      </template>
      <template v-if="column.key === 'phone'">
        <PhoneOutlined />
        <span> 联系电话 </span>
      </template>
      <template v-if="column.key === 'tags'">
        <SnippetsOutlined />
        <span> 标签 </span>
      </template>
      <template v-if="column.key === 'createTime'">
        <ClockCircleOutlined />
        <span> 创建时间 </span>
      </template>
      <template v-if="column.key === 'action'">
        <InteractionOutlined />
        <span> 操作 </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'name'">
        <a>
          {{ record.name }}
        </a>
      </template>
      <template v-else-if="column.key === 'tags'">
        <span>
          <a-tag :key="record.id" :color="record.deleted === 0 ? 'green' : 'red'">
            {{ record.deleted === 0 ? '启用中' : '被禁用' }}
          </a-tag>
        </span>
      </template>
      <template v-else-if="column.key === 'action'">
        <span>
          <a-button type="primary" @click="onEidt(record)">
            <template #icon>
              <SearchOutlined />
            </template>
            查看详情
          </a-button>

          <a-divider type="vertical" />

          <a-popconfirm :icon="customIcon" v-if="selectValue === '1'" title="确定要禁用这个用户吗？" okText="确认" cancelText="取消"
            @confirm="disableUser(record.id)" @cancel="cancelDelete">
            <a-button type="primary" danger>
              <template #icon>
                <StopOutlined />
              </template>
              禁用用户
            </a-button>
          </a-popconfirm>
          <a-button v-if="selectValue === '0'" type="primary" style="background-color: #00b96b"
            @click="enableUser(record.id)">
            <template #icon>
              <CheckCircleOutlined />
            </template>
            启用用户
          </a-button>
        </span>
      </template>
    </template>
  </a-table>
  <br />
  <a-pagination :current="parameterModel.pageNo" :page-size="parameterModel.pageSize" :total="total"
    @change="handlePageChange" show-less-items style="float: right" />
  <user-detail ref="editRef" :userInfo="userInfo" :getUserList="getUserList"></user-detail>
</template>
